<template>
  <div class="search">
    <van-search
      v-model="val"
      show-action
      placeholder="请输入商品名称"
      @search="onSearch"
      shape="round"
      @input="clear"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <h3 class="hot">热门搜索</h3>
    <ul class="keyword">
      <li @click="keywordClick(i)" v-for="i in keyword" :key="i.id">{{ i }}</li>
    </ul>

    <ul class="bastgood" v-if="searchList.length != 0">
      <li v-for="i in searchList" :key="i.id">
        <div class="content">
          <!--大盒子 -->
          <router-link :to="`/detail/${i.id}`">
            <van-image class="img" fit="contain" :src="i.image" alt="" />
          </router-link>
          <div class="right">
            <p class="text">{{ i.store_name }}</p>
            <p class="num">￥{{ i.price }}</p>
            <div class="vip">
              <span class="price">￥{{ i.vip_price }}</span>
              <img src="../assets/vip.png" alt="" />
              <span class="number">已售{{ i.sales }}{{ i.unit_name }}</span>
            </div>
            <router-link :to="`/detail/${i.id}`">
              <div class="cart"></div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>
    <template v-if="show">
      <p class="hint">很抱歉！！没有找到您想要的东西</p>
      <ForYou :item="tuijianList"></ForYou>
      <!-- <div class="title">
        <div class="line"></div>
        <div class="name">
          <van-icon name="stop" />
          <span>为你推荐</span>
          <van-icon name="stop" />
        </div>
        <div class="line"></div>
      </div>
      <ul class="tuijian">
        <li v-for="l in tuijianList" :key="l.id">
          <router-link :to="`/detail/${l.id}`">
            <van-image :src="l.image" />
            <p>{{ l.store_name }}</p>
            <span>￥{{ l.price }}</span>
          </router-link>
        </li>
      </ul> -->
    </template>
  </div>
</template>

<script>
import ForYou from "@/components/ForYou";

export default {
  name: "Search",
  data() {
    return {
      keyword: [],
      val: "",
      searchList: [],
      show: false,
      tuijianList: []
    };
  },
  components: {
    ForYou
  },
  methods: {
    onSearch() {
      this.$axios
        .get("/api/products?page=1&limit=20&keyword=" + this.val)
        .then(d => {
          this.searchList = d.data.data;
          console.log(d.data.data);
          if (d.data.data.length == 0) {
            this.show = true;
          } else {
            this.show = false;
          }
        });
    },
    clear() {
      if (this.val == "" || this.val == " ") {
        this.searchList = [];
        this.show = false;
      }
    },
    keywordClick(i) {
      this.val = i;
      this.onSearch();
    }
  },
  created() {
    this.$axios.get("/api/search/keyword").then(d => {
      this.keyword = d.data.data;
    });
    this.$axios.get("/api/product/hot?page=1&limit=20").then(d => {
      this.tuijianList = d.data.data;
      console.log(d.data.data);
    });
  }
};
</script>

<style lang="less" scoped>
// .tuijian {
//   display: flex;
//   justify-content: flex-start;
//   flex-wrap: wrap;
//   li {
//     width: 45vw;
//     height: 5rem;
//     margin: 0.2rem;

//     .van-image {
//       width: 4rem;
//       height: 4rem;
//     }
//     p {
//       text-align: left;
//       padding-left: 0.2rem;
//       font-size: 0.4rem;
//       color: rgb(51, 51, 51);
//       display: -webkit-box;
//       -webkit-box-orient: vertical;
//       -webkit-line-clamp: 1;
//       overflow: hidden;
//     }
//     span {
//       display: block;
//       text-align: center;

//       color: red;
//       font-size: 0.35rem;
//     }
//   }
// }
.keyword {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 0.5rem;
  li {
    font-size: 0.36rem;
    margin: 10px 12px;
    border: 1px solid rgb(170, 170, 170);
    border-radius: 2px;
    padding: 0.2rem;
    cursor: pointer;
  }
}

.hint {
  font-size: 0.4rem;
  color: red;
  text-align: center;
}

.hot {
  text-align: left;
  font-size: 0.45rem;
  color: rgb(153, 153, 153);
  padding-left: 12px;
}

.bastgood {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(238, 238, 238);
  li {
    width: 100%;
    margin: 10px 0;
    word-break: break-all;
    .content {
      display: flex;
      width: 100%;
      height: 100%;
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(238, 238, 238);
        position: relative;
        .cart {
          position: absolute;
          width: 0.7rem;
          height: 0.7rem;
          right: 0.1rem;
          bottom: 0.1rem;
          border: 1px solid tomato;
          border-radius: 50%;
          overflow: hidden;
          a {
            display: inline-block;
            width: 100%;
            height: 100%;
          }

          &::before {
            content: "";
            position: absolute;
            width: 0.4rem;
            height: 0.4rem;
            background: url(../assets/cart.png);
            background-size: 100%;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
        .text {
          color: #222;
          font-size: 0.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin: 5px 0;
          text-align: left;
        }
        .num {
          text-align: left;
          font-weight: bolder;
          color: #fc4141;
          font-size: 0.5rem;
          margin-top: 0.7rem;
        }
        .vip {
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin-top: 10px;
          .price {
            color: #282828;
            font-size: 0.5rem;
            margin-right: 0.15rem;
          }
          img {
            width: 0.8rem;
            height: auto;
          }
          .number {
            color: #aaa;
            margin-left: 0.15rem;
            overflow: hidden;
            font-size: 0.4rem;
          }
        }
      }
      .img {
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
        margin-right: 5vw;
      }
    }
  }
}

// .title {
//   height: 1.2rem;
//   font-size: 0.4rem;
//   color: #282828;

//   display: flex;
//   align-items: center;
//   justify-content: center;

//   .line {
//     width: 2.3rem;
//     height: 0.04rem;
//     background-color: #e9e9e9;
//   }
//   .name {
//     margin: 0 0.2rem;

//     span {
//       font-size: 0.38rem;
//       vertical-align: middle;
//       font-weight: bold;
//     }
//     i {
//       vertical-align: middle;
//       transform: rotate(45deg);
//     }
//   }
// }
</style>
